<template>
<!-- 社区选择详情 -->
  <div class="commun">
    <!-- 顶部导航栏 -->
    <van-nav-bar  title="社区选择"  left-arrow   @click-left="$router.go(-1)"></van-nav-bar>
    <div class="commun-bg">
      <!-- input输入框 -->
      <div class="search">
        <span class="search_box">
          <span class="search_span" @click="searchFn(),search = true"></span>
          <input class="search_input" v-model="searchName"  placeholder='请输入小区名称'   />
        </span>
      </div>
      <!-- 社区名称 -->   
      <div class="commun-selector">
        <span class="commun-name">请输您的小区查看所属社区名称</span>
      </div>
      <!-- 单项联选择器 -->
      <div class="commun-box">
        <van-picker :columns="columns" @change="onChange" />
          <div class="columns">{{nameObj.apartName}}</div>
        <button @click="oNomList">下一步</button>
      </div>
    </div>
  </div>
</template>
<script>
import apiHttp from '../../api/index'
import { Toast } from 'vant';
  export default {
    data() {
      return {
        columns: [],
        commApartList: [],
        nameObj:{},
        searchName:'',
        isComm:false,
        search:false,
        source:this.$route.query.source ? this.$route.query.source : '',
        // userId:sessionStorage.getItem('userId')
      }
    },

    methods:{
      // 输入框
      searchFn() {
        this.columns = []
        let parmes = {
          apartName:this.searchName
        }
        apiHttp.comIndex.findCommByApart(parmes,resp=>{
          if(resp.resultCode == '000000'){
            if(this.source == 'Activity' && this.searchName == ''){
              this.columns.push('所有社区')
              this.nameObj = {}
            }else{
              this.nameObj = resp.data.commApartList[0]
            }
            for(let i = 0; i < resp.data.commApartList.length; i++){
              this.columns.push(resp.data.commApartList[i].commName)
            }
            this.commApartList = resp.data.commApartList
          }else{
            Toast(resp.resultMsg)
          }
        })
      },
      // 下一步
      oNomList(){
        let self = this
        if(!localStorage.getItem('commId')){
          this.bindingComm()
          localStorage.setItem('commId',self.nameObj.commId)
          localStorage.setItem('commName',self.nameObj.commName)
        }
        if(self.source == 'Activity'){
          if(this.isComm || this.search){
            self.$router.push( {name: 'Activity',query:{id:self.nameObj.commId,name:self.nameObj.commName}})
          }else{
            self.$router.push( {name: 'Activity'})
          }
        }else if(self.source == 'comList'){
          self.$router.push( {name: 'comList',query:{id:self.nameObj.commId,name:self.nameObj.commName}})
        }else{
          self.$router.push( {name: "comList",query:{id:self.nameObj.commId,name:self.nameObj.commName}})
        }
      },
      // 绑定社区
      bindingComm(){
        let parmes = {
          userId:sessionStorage.getItem('userId'),
          commId: this.nameObj.commId
        }
        apiHttp.comIndex.bindingComm(parmes,resp=>{
          
        })
      },
      // 选择器
      onChange(picker, value, index) {
        for(let i = 0; i < this.commApartList.length; i++){
          if(value ==  this.commApartList[i].commName){
            this.nameObj = this.commApartList[i]
          }
        }
        this.isComm = true
      },
      // 获取社区列表
      getCommList(){
        apiHttp.comIndex.getCommList('',resp=>{
          if(resp.resultCode == '000000'){
            this.nameObj = resp.data.commApartList[0]
            for(let i = 0; i < resp.data.commApartList.length; i++){
              let obj = {
                id:resp.data.commApartList[i].commId,
                text:resp.data.commApartList[i].commName,
              }
              this.columns.push(resp.data.commApartList[i].commName)
            }
            this.commApartList = resp.data.commApartList
          }else{
            Toast(resp.resultMsg)
          }
        })
      }

    },
    mounted(){
      this.getCommList(); // 获取社区列表
      if(this.source == 'Activity'){
        this.columns.push('所有社区')
      }
    }

  }
</script>
<style scoped>
   @import '../../assets/css/community/index.css'; 
   .van-picker{
      width: 80%;
     margin: 0 auto;
   }
   .columns{
      font-size: 0.6rem;
      width: 86%;
      margin: 0 auto;
      margin-top: 0.6rem;
      margin-bottom: 0.6rem;
      line-height: 0.8rem;
      color: #FF6C00;
    }
</style>